{% extends "baseD.html" %}

{% block headtitle %}- All Scenes{% endblock %}

{% block css %}
	<link href="/live3dstatic/css/viewAll.css" rel="stylesheet" type="text/css" media="screen" />
{% endblock %}

{% block scripts %}
	<script type="text/javascript">
		function toggleSearchBox() {
			var sbox = document.getElementById('searchstring');

			if ( sbox.value == "Search for..." ) {
				sbox.value = "";
				sbox.style.color = "#333333";
				expandSearchOptions();
			} else if ( sbox.value == "" ) {
				sbox.style.color = "#999999";
				sbox.value = "Search for...";
			} else {
				sbox.style.color = "#333333";
				expandSearchOptions();
			}
		}
		function expandSearchOptions() {
			var rcont = document.getElementById('radiocontainer');
			var topbar = document.getElementById('topbar');

			rcont.style.display = "block";
			topbar.style.margin = "0 0 -20px 0";
		}
	</script>
{% endblock %}

{% block onload %} {% endblock %}

{% block divtitle %}- All Scenes{% endblock %}

{% block content %}
	<div id="contentpage">
		<div id="topbar">
			<div id="titlebox">
				<span class="title">Project Live 3D - View All PTZ Scenes</span>
			</div>
			<div id="searchbox">
				<form name="searchf" id="searchf" action="/viewAll" method="get" >
					<input type="text" id="searchstring" name="searchstring" value="Search for..." onfocus="toggleSearchBox()" onblur="toggleSearchBox()" />
					<input type="submit" id="searchstringsubmitbutton" value="Go">
					<br />
					<div style="clear:both;"></div>
					<div id="radiocontainer" style="margin:5px 0 0 5px;">
						<input type="radio" id="searchin" name="searchin" value="Name" checked="checked"/> Name
						<input type="radio" id="searchin" name="searchin" value="Owner" /> Owner
						<input type="radio" id="searchin" name="searchin" value="URL" /> URL
					</div>
				</form>
			</div><!-- end searchbox -->
			<div style="clear:both;"></div>
		</div>
		
		{% for scene in scenes %}
			<a href="viewScene?scene={{scene.index}}">
				<div class="group">
					<div class="imageshadow">
						<img src='{{scene.url}}' alt="" class="smallimage" />
					</div><!-- end imageshadow -->
					
					<div class="infocontainer">
						<div class="sceneInfo">
							<h3>{% if scene.name %}
								{{scene.name}}
							{% endif %}</h3>
							<p>Calibrated: 
							{% if scene.calibrated %}
								<span class="yes"> Yes </span>
							{% else %}
								<span class="no"> No </span>
							{% endif %}</p>
							<p>Scene index: {{scene.index}}
							</p>
							
							<p>{% if scene.amosId %}
								AMOS Camera {{scene.amosId}}
							{% else %}
								&nbsp;
							{% endif %}</p>
						</div><!-- end sceneInfo -->
						
						<div class="rating">
							<p>
							{% if scene.ratingAverage %}
								{% for star in scene.stars %}
									{% if star %}
										<div class="star_on"></div>
									{% else %}
										<div class="star_off"></div>
									{% endif %}
								{% endfor %}<br/></p>
								<p>
								{{ scene.ratingCount }} vote{{ scene.ratingCount|pluralize }}</p>
							{% endif %}
						</div><!-- end rating -->
						<div style="clear:both;"></div>
					</div><!-- end infocontainer -->
				</div><!-- end group -->
			</a>
		{% endfor %}
		<div id="pagebox">
			{% for page in firstGroup %}
				<a class="pagenum" href="viewAll?page={{page}}"> {{page}} </a>
			{% endfor %}
			{% if prevEllipsis %} ... {% endif%}
			{% for page in prev %}
				<a class="pagenum" href="viewAll?page={{page}}"> {{page}} </a>
			{% endfor %}
			<p id="chosenpagenum">{{thisPage }}</p>
			{% for page in next %}
				<a class="pagenum" href="viewAll?page={{page}}"> {{page}} </a>
			{% endfor %}
			{% if nextEllipsis %} ... {% endif %}
			{% for page in lastGroup %}
				<a class="pagenum" href="viewAll?page={{page}}"> {{page}} </a>
			{% endfor %}
		</div> <!-- end pagebox -->
	</div><!-- end bigpage -->
{% endblock %}
		
{% block scripts2 %} {% endblock %}